<!--
 * @Author: cqg
 * @Date: 2021-06-30 20:37:56
 * @LastEditTime: 2021-07-09 15:47:09
 * @Description: 房间看板
 * @LastEditors: cqg
-->

<template>
  <basic-container>
    <span class="hotelName">
      <el-select v-model="hotelId" placeholder="选择酒店" filterable @change="hotelChange">
        <el-option v-for="item in hotelList" :key="item.hotelId" :label="item.hotelName" :value="item.hotelId" />
      </el-select>
    </span>
    <template>{{ hotelInformation.hotelDistrict }}</template>
    <template>{{ hotelInformation.hotelStreet&&`-${hotelInformation.hotelStreet}`}}</template>
    <template>{{ hotelInformation.hotelCommunity&&`-${hotelInformation.hotelCommunity}`}}</template>
    <template>{{ hotelInformation.hotelGrid&&`-${hotelInformation.hotelGrid}`}}</template>
    <span class="ml20">负责人：{{ hotelInformation.hotelContact }}</span>
    <span class="ml20">联系方式：{{ hotelInformation.hotelPhone }}</span>
    <span class="ml20">挂点领导：{{ hotelInformation.leader }}</span>
    <div class="floorTab mt20">
      <el-tabs v-model="activeName" @tab-click="getARoomList">
        <el-tab-pane label="全部" />
        <el-tab-pane v-for="item in hotelInformation.floorStaticalList" :key="item.name" :label="item.name+'层'" :name="item.name" />
      </el-tabs>
    </div>
    <p style="font-weight:700;" @click="statiBoxShow =!statiBoxShow" class="mb20">
      总体情况
      <i class="el-icon-arrow-up" style="background-color: #66B6FF;color: white;" />
      <el-radio-group v-model="roomState" class="fr" @change="getAllInfo()" :style="{display:statiBoxShow?'block':'none'}">
        <el-radio label="21">已入住</el-radio>
        <el-radio label="31">待消杀</el-radio>
        <el-radio label="01">空房</el-radio>
      </el-radio-group>
    </p>
    <div :style="{overflow: 'hidden',display:statiBoxShow?'block':'none'}">
      <div class="statisticalBox fl" v-for="item in  sumList" :key="item.img" :style="{background:item.bgc,color:item.color}">
        <div class="fl box-item">
          <img :src="require(`${item.img}`)" class="mr20" width="30" height="100%" />
          <div>
            <span class="weight" style="font-size:16px;">{{item.result}}间</span>
            <p style="text-align:right;width: 100%;">{{item.name}}</p>
          </div>
        </div>
      </div>
      <div style="overflow: hidden;">
        <div class="fr" style="font-weight:700;">
          <el-tag type="info" style="background:rgba(255, 160, 89, 0.1); color:#FFA059;">关爱人群</el-tag>
          <el-tag type="info" style="background:rgba(221, 131, 224, 0.1); color:#DD83E0;">关注人群</el-tag>
          <el-tag type="info" style="background:rgba(255, 139, 124, 0.1);color:#FF8B7C;">确诊病例</el-tag>
          <el-tag type="info" style="background:rgba(124, 148, 244, 0.1); color:#7C94F4;">一般人员</el-tag>
          <el-tag type="info" style="background:rgba(97, 195, 157, 0.1); color:#61C39D;">工作人员</el-tag>
        </div>
      </div>
      <div style="overflow: hidden;" class="prompt">
        <div class="fr mt20">
          <img src="./img/老人6.png" width="16" height="16" alt />老人
          <img src="./img/儿童6.png" width="16" height="16" alt />儿童
          <img src="./img/孕妇6.png" width="16" height="16" alt />孕妇
          <img src="./img/基础疾病6.png" width="16" height="16" alt />基础疾病
          <img src="./img/心理疾病6.png" width="16" height="16" alt />心理疾病
          <img src="./img/形状6.png" width="16" height="16" alt />十大症状
        </div>
      </div>
    </div>
    <el-divider />
    <!-- 内容主体 该酒店所有层容器 -->
    <div class="main">
      <el-empty description="暂无数据" v-show="theLayerData.length==0" />
      <el-collapse accordion :value="0">
        <el-collapse-item v-for="(floor,index) in theLayerData" :key="floor.name" :name="index">
          <template slot="title">
            <img src="./img/编组.png" width="12" alt />
            <span style="color:#4E9DFD;" class="ml20 mr20">第{{floor.name}}层</span>
          </template>
          <div class="wrapper">
            <div :class="['roomBox','mt20',item.color] " v-for="item in floor.houseStaticalVoList" @click="checkIn(item)">
              <img src="./img/gr.png" alt v-show="item.color=='BLUE'" />
              <img src="./img/red.png" alt v-show="item.color=='RED'" />
              <img src="./img/blue.png" alt v-show="item.color =='GREEN'" />
              <img src="./img/or.png" alt v-show="item.color=='ORANGE'" />
              <span style="font-weight:700;font-size:16px;">{{item.roomNum}}</span>
              <span class="ren">{{item.rs}}人</span>
              <p class="renyuanImg" v-if="item.color=='ORANGE'">
                <img src="./img/儿童.png" width="16" height="16" alt v-if="item.ets" />
                <img src="./img/老人.png" width="16" height="16" alt v-if="item.lrs" />
                <img src="./img/孕妇.png" width="16" height="16" alt v-if="item.hys" />
                <img src="./img/形状.png" width="16" height="16" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病.png" width="16" height="16" alt v-if="item.xljbs" />
                <img src="./img/基础疾病.png" width="16" height="16" alt v-if="item.jcjbs" />
              </p>
              <p class="renyuanImg" v-if="item.color=='RED'">
                <img src="./img/儿童(1).png" width="16" height="16" alt v-if="item.ets" />
                <img src="./img/老人(1).png" width="16" height="16" alt v-if="item.lrs" />
                <img src="./img/孕妇(1).png" width="16" height="16" alt v-if="item.hys" />
                <img src="./img/形状(1).png" width="16" height="16" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(1).png" width="16" height="16" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(1).png" width="16" height="16" alt v-if="item.jcjbs" />
              </p>
              <!-- <p class="renyuanImg">
              <img src="./img/儿童(2).png" width="16" height="16" alt  v-if="item.ets"/>
              <img src="./img/老人(2).png" width="16" height="16" alt v-if="item.lrs"/>
              <img src="./img/孕妇(2).png" width="16" height="16" alt   v-if="item.hys"/>
              <img src="./img/形状(2).png" width="16" height="16" alt v-if="item.sdzzs"/>
              <img src="./img/心理疾病(2).png" width="16" height="16" alt v-if="item.xljbs"/>
              <img src="./img/基础疾病(2).png" width="16" height="16" alt v-if="item.jcjbs"/>
              </p>-->
              <p class="renyuanImg" v-if="item.color =='GREEN'">
                <img src="./img/儿童(3).png" width="16" height="16" alt v-if="item.ets" />
                <img src="./img/老人(3).png" width="16" height="16" alt v-if="item.lrs" />
                <img src="./img/孕妇(3).png" width="16" height="16" alt v-if="item.hys" />
                <img src="./img/形状(3).png" width="16" height="16" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(3).png" width="16" height="16" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(3).png" width="16" height="16" alt v-if="item.jcjbs" />
              </p>
              <p class="renyuanImg" v-if="item.color=='BLUE'">
                <img src="./img/儿童(4).png" width="16" height="16" alt v-if="item.ets" />
                <img src="./img/老人(4).png" width="16" height="16" alt v-if="item.lrs" />
                <img src="./img/孕妇(4).png" width="16" height="16" alt v-if="item.hys" />
                <img src="./img/形状(4).png" width="16" height="16" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(4).png" width="16" height="16" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(4).png" width="16" height="16" alt v-if="item.jcjbs" />
              </p>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog
      title="办理入住"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      v-loading="roomDialogLoading"
      element-loading-text="正在录入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table :data="hotelStaffList">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="personName" label="姓名" />
        <el-table-column prop="cardId" label="证件号码" />
        <el-table-column prop="phone" label="手机号" />
      </el-table>
      <el-input v-model="qRCodeInfo" ref="input" @input="roomDialogLoading = true" style="ime-mode:disabled;opacity:0;height:0px;" show-password @keyup.enter.native="onSubmit" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-button type="primary" @click="newCheckIn()" icon="el-icon-circle-plus-outline">新增入住</el-button>
      </span>
      <div class="personalInfo" v-if="personalInfoShow" v-loading="personalInfoLoading" element-loading-text="正在办理中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="header">
          <span style="font-size:20px">{{personMoveDto.jdglPersonInfo.name}}</span>
          <span class="iconfont icon-xingbienv" v-if="personMoveDto.jdglPersonInfo.sex=='0'"></span>
          <span class="iconfont icon-xingbienan" v-if="personMoveDto.jdglPersonInfo.sex=='1'"></span>
          <p>证件号码：{{personMoveDto.jdglPersonInfo.cardId}}</p>
          <p>手机号码：{{personMoveDto.jdglPersonInfo.telPhone}}</p>
        </div>
        <p style="color:blue;">隔离安排</p>
        <ul>
          <li>
            <span>已选房号</span>
            {{personMoveDto.jdglHotelMoveInto.roomNum}}
          </li>
          <li>
            <span>开始隔离时间</span>
            <div class="row">
              <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="personMoveDto.jdglHotelMoveInto.moveStartTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" />
            </div>
          </li>
          <li>
            <span>隔离天数</span>
            <el-input v-model.number="personMoveDto.jdglHotelMoveInto.moveDay" style="width:25%;" />天
          </li>
          <li>
            <span>预计结束隔离时间</span>
            <div class="row">
              <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="personMoveDto.jdglHotelMoveInto.moveEndTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" />
            </div>
          </li>
        </ul>
        <el-button type="primary" style="width:100%" @click="enter">办理入住</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>

import {
  getHotel,
  getPersonInHouse,
  getIszUrl,
  enter,
  getAllInfo
} from "@/views/yq-hotel/api/roomKanban.js";
import "@/assets/icon/font/iconfont.css";
export default {
  data () {
    return {
      floor: {
        roomTotal: 0,
        roomWork: 0,
        roomIsocial: 0,
        roomEnter: 0,
        roomResidue: 0,
        roomFocus: 0,
        roomDiagnosis: 0,
        roomDisinfect: 0,
      },
      roomState: '',
      statiBoxShow: true,
      //楼层tab页
      //根据所选层数来暂存房间列表
      theLayerData: [],
      //当前选中项
      activeName: '',
      personalInfoLoading: false,
      roomDialogLoading: false,
      personalInfoShow: false,
      qRCodeInfo: "",
      //入住人员列表
      hotelStaffList: [],
      dialogVisible: false,
      // 酒店信息
      hotelInformation: {},
      // 酒店列表
      hotelList: [],
      //酒店Id
      hotelId: "",
      //办理入住房客信息
      personMoveDto: {
        jdglHotelMoveInto: {
          houseId: "",
          roomNum: "",
          moveStartTime: "",
          moveDay: 14,
          moveEndTime: "",
          remark: "",
        },
        jdglPersonInfo: {
          name: "",
          sex: "",
          cardId: "",
          telPhone: "",
          cardType: "",
        },
      },
    };
  },
  mounted () {
    this.getHotelList();
  },
  computed: {
    //日期时间选择器配置选项
    pickerOptions () {
      return {
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周后",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      };
    },
    sumList () {
      return [
        {
          name: "房间总数",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          color: "#66B6FF",
          img: "./img/组 3.png",
          num: "2",
          result: this.floor.roomTotal,
        },
        {
          name: "工作人员",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          img: `./img/组 4.png`,
          color: "#66B6FF",
          num: "2",
          result: this.floor.roomWork,
        },
        {
          name: "隔离人员",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          img: `./img/组 31.png`,
          color: "#66B6FF",
          num: "2",
          result: this.floor.roomIsocial,
        },
        {
          name: "入住房间",
          bgc: "linear-gradient(270deg, #E9FFF6 0%, #CCEADF 100%)",
          img: `./img/组 27.png`,
          color: "#5FC3BD",
          num: "2",
          result: this.floor.roomEnter,
        },
        {
          name: "空房间",
          bgc: "linear-gradient(270deg, #E7FFFE 0%, #D2F0EF 100%)",
          img: `./img/组 28.png`,
          color: "#5FC3BD",
          num: "2",
          result: this.floor.roomResidue,
        },
        {
          name: "重点关爱",
          bgc: "linear-gradient(270deg, #FFF2E8 0%, #FFE9D8 100%)",
          img: `./img/组 29.png`,
          color: "#FFA059",
          num: "2",
          result: this.floor.roomFocus,
        },

        {
          name: "重点关注",
          bgc: "linear-gradient(270deg, #FFF3F1 0%, #FFD8D1 100%)",
          img: `./img/组 32.png`,
          color: "#FF8B7C",
          num: "2",
          result: this.floor.roomDiagnosis,
        },
      ];
    },
  },
  methods: {
    //办理入住
    async enter () {
      this.personalInfoLoading = true;
      let rps = await enter({ ...this.personMoveDto });
      this.personalInfoLoading = false;
      this.checkIn(this.personMoveDto.jdglHotelMoveInto);
      this.personMoveDto = {
        jdglHotelMoveInto: {
          houseId: "",
          roomNum: "",
          moveStartTime: "",
          moveDay: 14,
          moveEndTime: "",
          remark: "",
          cardType: "",
        },
        jdglPersonInfo: {
          name: "",
          sex: "",
          cardId: "",
          telPhone: "",
        },
      },
        this.personalInfoShow = false;
      this.$message.success("办理成功");
    },
    async onSubmit () {
      this.personalInfoShow = true;
      let rps = await getIszUrl({ url: this.qRCodeInfo });
      this.personMoveDto.jdglPersonInfo.name = rps.data.data.name;
      this.personMoveDto.jdglPersonInfo.sex = rps.data.data.sex;
      this.personMoveDto.jdglPersonInfo.cardId = rps.data.data.id_code;
      this.personMoveDto.jdglPersonInfo.telPhone = rps.data.data.phone;
      this.roomDialogLoading = false;
    },
    //获取酒店列表
    async getHotelList () {
      let rps = await getHotel();
      this.hotelList = rps.data.data;
      if (this.hotelList.length) {
        this.hotelId = this.hotelList[0].hotelId;
        this.hotelInformation = this.hotelList[0];
      }
      this.getAllInfo();
    },
    //过滤出当前选中酒店信息
    hotelChange () {
      this.hotelInformation = {};
      Object.keys(this.floor).map((e) => (this.floor[e] = 0));
      this.getAllInfo();

    },
    //获取当前酒店信息
    async getAllInfo () {
      let rps = await getAllInfo({ hotelId: this.hotelId, roomState: this.roomState, })
      this.hotelInformation = rps.data.data
      this.theLayerData = rps.data.data.floorStaticalList
      this.theLayerData.forEach(e => Object.keys(this.floor).map(v => this.floor[v] += e[v]));
    },
    //获取当前酒店房间列表
    async getARoomList (item) {
      if (this.hotelId == "") {
        return this.$message.warning("请先选择酒店");
      }
      Object.keys(this.floor).map(e => this.floor[e] = 0);
      this.theLayerData = item.name ? this.hotelInformation.floorStaticalList.filter(e => e.name == item.name) : this.hotelInformation.floorStaticalList;
      if (item.name) {
        this.floor = { ...this.floor, ...this.hotelInformation.floorStaticalList.filter((e) => e.name == item.name)[0], };
      } else {
        this.theLayerData.forEach(e => Object.keys(this.floor).map(v => this.floor[v] += e[v]));
      }
    },
    handleClose (done) {
      done();
    },
    async newCheckIn () {
      this.$message.warning("请扫码");
      this.qRCodeInfo = "";
      this.$nextTick(() => this.$refs.input.focus());
    },
    //查看房间内人员信息
    async checkIn (item) {
      this.dialogVisible = true;
      let rps = await getPersonInHouse(item.houseId);
      (this.personMoveDto = {
        jdglHotelMoveInto: {
          houseId: "",
          roomNum: "",
          moveStartTime: "",
          moveDay: 14,
          moveEndTime: "",
          remark: "",
        },
        jdglPersonInfo: {
          cardType: "",
          name: "",
          sex: "",
          cardId: "",
          telPhone: "",
        },
      }),
        (this.personalInfoShow = false);
      this.qRCodeInfo = "";
      let { houseId, roomNum } = item;
      this.personMoveDto.jdglHotelMoveInto = {
        ...this.personMoveDto.jdglHotelMoveInto,
        roomNum,
        houseId,
      };
      this.hotelStaffList = rps.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-item {
  display: flex;
  align-items: center;
  & > div {
    display: flex;
    flex-direction: column;
  }
}
.main {
  padding: 10px;
  height: 360px;
  position: relative;
  overflow-y: auto;
}
// ===
.el-tag {
  margin-left: 10px;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.hotelName {
  display: inline-block;
  width: 300px;
}
.roomBox {
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 10px;
  height: 80px;
  width: 100%;
  position: relative;
  > img {
    position: absolute;
    top: 1px;
    right: 1px;
  }
  .renyuanImG {
    img {
      margin-left: 5px;
    }
  }
}
.wrapper {
  /* 转化元素类型 */
  display: grid;
  /* 设置网格的间隙 */
  grid-gap: 10px;
  /* 设置每列的尺寸 */
  grid-template-columns: repeat(
    auto-fill,
    180px
  ); // 修复低分辨率下文字换行的bug
  .ren {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    opacity: 0.64;
    border-radius: 2px;
    margin-left: 10px;
    padding: 0 5px;
  }
}

.el-icon-user-solid {
  color: #409eff;
}
.prompt {
  .iconfont {
    margin-left: 20px;
  }
}
.font-14 {
  font-size: 14px;
}
.personalInfo {
  padding: 10px;
  width: 332px;
  height: auto;
  background-color: white;
  position: absolute;
  right: -340px;
  top: 0;
  .header {
    height: 85px;
  }

  .iconfont {
    font-size: 25px;
  }
  ul {
    padding-left: 15px;
    li {
      // height: 37px;
      // line-height: 37px;
      margin-bottom: 20px;
      list-style-type: disc;
      span {
        display: inline-block;
        width: 29%;
      }
      .row {
        display: inline-block;
        width: 66%;
      }
    }
  }
}
.floorTab {
  width: 100%;
  /deep/.el-tabs__item {
    font-size: 18px;
    // font-weight: 600;
    font-family: SourceHanSansCN-Normal;
  }
  /deep/.el-tabs__nav-next {
    background-color: #e8e8e8;
  }
  /deep/.el-tabs__nav-prev {
    background-color: #e8e8e8;
  }
}
.weight {
  font-weight: 700;
}
.ORANGE {
  background: rgba(255, 160, 89, 0.1);
  color: #ffa059;
  border: 1px solid #ffa059;
  opacity: 1;
  border-radius: 4px;
  .ren {
    color: white;
    background: #ffa059;
  }
}
.PURPLE {
  background: rgba(221, 131, 224, 0.1);
  color: #dd83e0;
  border: 1px solid #dd83e0;
  opacity: 1;
  border-radius: 4px;
  .ren {
    color: white;
    background: #dd83e0;
  }
}
.RED {
  background: rgba(255, 139, 124, 0.1);
  border: 1px solid #ff8b7c;
  opacity: 1;
  color: #ff8b7c;
  border-radius: 4px;
  .ren {
    color: white;
    background: #ff8b7c;
  }
}
.GREEN {
  background: rgba(124, 148, 244, 0.1);
  border: 1px solid #7c94f4;
  opacity: 1;
  color: #7c94f4;
  border-radius: 4px;
  .ren {
    color: white;
    background: #7c94f4;
  }
}
.BLUE {
  background: rgba(97, 195, 157, 0.1);
  border: 1px solid #61c39d;
  opacity: 1;
  color: #61c39d;
  border-radius: 6px;
  .ren {
    color: white;
    background: #61c39d;
  }
}
.WHITE {
  background: white;
  border: 1px solid gray;
  border-radius: 6px;
  .ren {
    background: gray;
  }
}
/deep/.el-collapse-item__arrow {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  background-color: rgb(102, 182, 255);
  color: #ffffff;
  margin: 0px 90% 0 auto;
  transition: transform 0.3s;
  font-weight: 300;
}
/deep/.el-collapse-item__header {
  padding-left: 10px;
  background: rgba(102, 182, 255, 0.1);
  border-radius: 10px;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
}
/deep/.el-collapse-item {
  margin-bottom: 20px;
}
.statisticalBox {
  padding: 12px;
  font-size: 16px;
  position: relative;
  width: 150px;
  overflow: hidden;
}
</style>
